@(id: String)(implicit request: play.api.mvc.RequestHeader)
@main("Detail") {

	<style>

			.radio, .checkbox {
				position: relative;
				display: block;
				margin-top: 5px;
				margin-bottom: 10px;
			}

			.form-group {
				margin-top: 20px;
			}

			.myDiv {
				margin-top: 20px;
			}

			.mySelected {
				background-color: #2aabd2;
				color: white;
			}

			.mySelected:hover {
				background-color: #2aabd2;
				color: white;
				cursor: default !important;
			}

			.form-horizontal .has-feedback .form-control-feedback {
				top: 0;
				right: -15px;
			}

			.toggling > .toggle {
				width: 62px !important;
				height: 35px !important
			}

			.nav-is-visible {
				background-color:#429DAE;
				border-radius: 6px ;
			}

	</style>

	<div class="row">
		<div class="form-group col-sm-12">
			<h2 class="page-heading"
			style="text-align: left;
				border-bottom: 5px solid #e9f3f4"><span id="kindTitle"></span>Detail</h2>
		</div>
	</div>

	<div class="tab-pane  fade in active" id="summary">

		<div id="bioSample">



		</div>

		<div id="assembly">


		</div>

		<div id="mummer">

			<div id="cover">

			</div>

			<div id="axt">

				<h4 class="myH5">Colinearity with H37Rv</h4>

				<div id="download" style="margin-top: 10px">
					<form method="get" action="@routes.BrowseController.downloadMummerFile">
						<input hidden value="@id/axt.txt" name="fileName">
						<button class="btn btn-primary" style="cursor: pointer;" type="submit">
							<span><em class='fa fa-download'></em> Download AXT</span>
						</button>
					</form>

				</div>

				<div id="charts">

					<div style="width: 60%">
						<div class="btn-group" style="float: right">
							<a class="btn  btn-default idsButton" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true" aria-expanded="false"
							title="Download image" style="border-radius: 4px">
								<i class="fa fa-bars"></i>
							</a>
							<ul class="dropdown-menu pull-right">

								<li>
									<a href="@routes.BrowseController.downloadMummerFile?fileName=@id/Target-Query.parallel.png" >
										Download PNG image
									</a>
								</li>

								<li>
									<a href="@routes.BrowseController.downloadMummerFile?fileName=@id/Target-Query.parallel.svg">
										Download SVG image
									</a>
								</li>

							</ul>
						</div>
						<img style="width: 100%" src="@routes.BrowseController.getMummerImage?fileName=@id/Target-Query.parallel.png" >
					</div>
				</div>

			</div>

			<div id="snp">

			</div>

			<div id="inDel">

			</div>

			<div id="sv">

			</div>

			<div id="seq"></div>

		</div>

	</div>

	<nav class="quick-nav" style=" " id="myNav">
		<a class="quick-nav-trigger myQuickNav" href="#0" style="cursor: pointer;" >
			<span aria-hidden="true" style="cursor: pointer;
				z-index: 99;"></span>
		</a>
		<ul id="myUl">
			<li>
				<a href="#bioSample" >
					<span>Sample Info</span>
				</a>
			</li>
			<li>
				<a href="#assembly" >
					<span>Assembly Summary</span>
				</a>
			</li>
			<li>
				<a href="#genomeInfo" >
					<span>Genome-Annotation-Data</span>
				</a>
			</li>
			<li>
				<a href="#cover" >
					<span>Coverage information align with H37Rv</span>
				</a>
			</li>
			<li>
				<a href="#axt" >
					<span>Colinearity with H37Rv</span>
				</a>
			</li>
			<li>
				<a href="#snp" >
					<span>SNP</span>
				</a>
			</li>
			<li>
				<a href="#inDel" >
					<span>InDel</span>
				</a>
			</li>
			<li>
				<a href="#sv" >
					<span>SV</span>
				</a>
			</li>
			<li>
				<a href="#seq" >
					<span>Sequence</span>
				</a>
			</li>
		</ul>
		<span aria-hidden="true" class="quick-nav-bg"></span>
	</nav>

	<script>
			var id = "@id"
			$(function () {
				DetailInfo.init
				d3.select()
			})
	</script>


}
